<div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 *ngIf="account">用户 [<b>{{ account.login }}</b>] 的设置</h2>

            <div class="alert alert-success" *ngIf="success">
                <strong>设置已保存！</strong>
            </div>

            <jhi-alert-error></jhi-alert-error>

            <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="account" novalidate>
                <div class="form-group">
                    <label class="form-control-label" for="firstName">名字</label>
                    <input type="text" class="form-control" id="firstName" name="firstName" placeholder="您的名字"
                           formControlName="firstName">

                    <div *ngIf="settingsForm.get('firstName')!.invalid && (settingsForm.get('firstName')!.dirty || settingsForm.get('firstName')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('firstName')?.errors?.required">
                            名字是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('firstName')?.errors?.minlength">
                            名字至少需要1个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('firstName')?.errors?.maxlength">
                            名字不能超过50个字符。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="lastName">姓氏</label>
                    <input type="text" class="form-control" id="lastName" name="lastName" placeholder="您的姓氏"
                           formControlName="lastName">

                    <div *ngIf="settingsForm.get('lastName')!.invalid && (settingsForm.get('lastName')!.dirty || settingsForm.get('lastName')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('lastName')?.errors?.required">
                            姓氏是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('lastName')?.errors?.minlength">
                            姓氏至少需要1个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('lastName')?.errors?.maxlength">
                            姓氏不能超过50个字符。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="email">电子邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="您的电子邮箱"
                           formControlName="email">

                    <div *ngIf="settingsForm.get('email')!.invalid && (settingsForm.get('email')!.dirty || settingsForm.get('email')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('email')?.errors?.required">
                            电子邮箱是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('email')?.errors?.email">
                            电子邮箱格式无效。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('email')?.errors?.minlength">
                            电子邮箱至少需要5个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="settingsForm.get('email')?.errors?.maxlength">
                            电子邮箱不能超过100个字符。
                        </small>
                    </div>
                </div>

                <button type="submit" [disabled]="settingsForm.invalid" class="btn btn-primary">保存</button>
            </form>
            <hr>
            <div class="alert alert-warning">
                <i>您可以删除您的 微服务代码模版 账户，但请记住这个操作是不可逆的。</i>
                    <ul>
                        <li>
                            <i>您将失去账户中的所有内容和数据。这包括您保存的所有 JDL 文件</i>
                        </li>
                        <li>
                            <i>您已经生成的 GitHub 或 GitLab 项目将保持不变</i>
                        </li>
                    </ul>
                <button type="button" (click)="deleteAccount()" class="btn btn-danger">删除我的 微服务代码模版 账户</button>
            </div>
        </div>
    </div>
</div>
